<template>
  <div>
    <!-- 轮播图组件 -->
    <Carousel></Carousel>
    <!-- 搜索框组件 -->
    <Search></Search>
    <!-- 首页的筛选医院 -->
    <!-- 让两列有 20px 距离 -->
    <el-row :gutter="20">
      <el-col :span="20">
        <!-- 等级组件 定义 getLevel方法接收子组件传递的 level-->
        <Level @getLevel="getLevel"></Level>
        <!-- 地区组件 定义 getRegion方法接收子组件传递的 region-->
        <Region @getRegion="getRegion"></Region>
        <!-- 首页医院卡片 -->
        <div class="hospital" v-if="hasHospitalArr.length>0">
          <!-- 卡片组件 -->
          <Card class="item" v-for="(item, index) in hasHospitalArr" :key="index" :hospitalInfo="item" ></Card>
        </div>
        <!-- 暂无数据 -->
        <el-empty v-else description="暂无数据"></el-empty>
        <div>
          <!-- 分页器  '->' 是顶到最右侧 -->
          <el-pagination 
          v-model:current-page="pageNo" 
          v-model:page-size="pageSize" 
          :page-sizes="[6, 10, 20]"
          :background="true" 
          layout="prev, pager, next, jumper,->,sizes,total" 
          :total="total" 
          @current-change="currentChange"
          @size-change="sizeChange"
          />
        </div>
      </el-col>
      <el-col :span="4">
      <!-- 右侧的常见科室等 -->
      <Tip></Tip>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// // 引入 组合式 API
import { onMounted, ref } from 'vue'
import { reqHospital } from '@/api/home'
// 引入类型
import type { Content, HospitalResponseData } from '@/api/home/type.ts'
// 引入轮播图组件
import Carousel from './carousel/index.vue'
// 引入搜索框组件
import Search from './search/index.vue'
// 引入等级组件
import Level from './level/index.vue'
// 引入地区组件
import Region from './region/index.vue'
// 引入卡片组件
import Card from './card/index.vue'
// 引入右侧常见科室等组件
import Tip from './tip/index.vue'
// 分页器需要的数据
// 第几页
let pageNo = ref<number>(1)
// 一页几个
let pageSize = ref<number>(10)
// 存储医院数据
let hasHospitalArr = ref<Content>([])
// 存储医院个数
let total = ref<number>(0)
// 存储医院等级
let hostype = ref<string>("")
// 存储医院地区
let districtCode = ref<string>("")

// 组件挂载完毕执行
onMounted(() => {
  getHospitalInfo()
})
// 获取医院数据
const getHospitalInfo = async() => {
  // 获取医院的数据: 默认获取第一页 一页十个的数据
  let res: HospitalResponseData = await reqHospital(
    pageNo.value, 
    pageSize.value,
    hostype.value,
    districtCode.value
    )
  // console.log(res)
  if(res.code == 200) {
    hasHospitalArr.value = res.data.content
    total.value = res.data.totalElements
  }
}
// 当前页发生变化时调用
const currentChange = () => {
  getHospitalInfo()
}
// pageSize 发生变化时调用
const sizeChange = () => {
  // 当 pageSize 发生变化 应该让当前页为 1 
  pageNo.value = 1
  getHospitalInfo()
}
// 接收子组件传递的数据
const getLevel = (level:string) => {
  hostype.value = level
  getHospitalInfo()
}
const getRegion = (region:string) => {
  districtCode.value = region
  getHospitalInfo()
}
</script>
 
<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .item {
    width: 48%;
    margin: 10px 0;
  }
}
</style>
